<template>
  <div class="album-wrap position-relative bg-white">
    <el-container class="position-absolute container-wrap-ablbum">
      <el-header class="pl-3 m-0">
        <div class="search-bar d-flex align-items-center">
          <el-select v-model="value" placeholder="请选择" clearable class="mr-2" size="small">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-input v-model="input" placeholder="请输入内容" size="small" class="w-25"></el-input>
          <el-button type="primary" size="small" class="serve-btn ml-2">
            <i class="el-icon-search mr-2"></i>搜索
          </el-button>
          <div class="addbtns ml-auto">
            <el-button type="primary" size="small" class="ml-2">
              <i class="el-icon-plus mr-2"></i>创建相册
            </el-button>
            <el-button type="primary" size="small" class="ml-2">
              <i class="el-icon-upload mr-2"></i>上传图片
            </el-button>
          </div>
        </div>
      </el-header>
      <el-container class="main-wrap ml-3 mr-3">
        <el-aside width="200px" class="aside-wrap bg-light">
          <div
            class="p-2 d-flex align-items-center card-item-aside border-bottom"
            v-for="(item, index) in listdata"
            :key="index"
          >
            <p class="mb-0 pl-2 text-black-50">{{item.album_name}}</p>
            <div class="ml-auto">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  <el-tag>{{item.photh_num}}</el-tag>
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <i class="el-icon-edit"></i>修改
                  </el-dropdown-item>
                  <el-dropdown-item>
                   <i class="el-icon-delete"></i>删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-aside>
        <el-main>
          <li v-for="item in 10" :key="item">{{ item }}</li>
        </el-main>
      </el-container>
      <el-footer class="footer bg-white position-absolute p-0">Footer</el-footer>
    </el-container>
    <!-- 删除轻提示 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        }
      ],
      value: "",
      input: "",
      listdata: [],
      visible: true
    };
  },
  created() {
    this._initListData();
  },
  methods: {
    _initListData() {
      for (let i = 1; i <= 50; i++) {
        this.listdata.push({
          album_name: `相册${i}`,
          photh_num: parseInt(Math.random() * 500 + 1, 10)
        });
      }
    },
    // 删除相册
    delectAlbum() {
      // 找到要删除的相册提示删除 从那个开始 删除几个
      this.visible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.album-wrap {
  height: 88%;
  .serve-btn {
    text-align: center;
  }
  .card-item-aside {
    cursor: pointer;
    &:hover {
      background-color: #fff;
    }
  }
}
.container-wrap-ablbum {
  height: 100%;
  z-index: 0;
}
.main-wrap {
  height: 100%;
  padding-bottom: 60px;
}
.aside-wrap {
  height: 100%;
  overflow: auto;
}
.container-wrap-ablbum {
  left: 0px;
  top: 0px;
  bottom: 0;
  right: 0;
}
.el-header {
  color: #333;
  text-align: center;
  line-height: 60px;
}
.footer {
  line-height: 60px;
  text-align: center;
  left: 0;
  bottom: -60px;
  width: 100%;
  z-index: 99999;
}

.el-aside {
  color: #333;
  text-align: center;
}

.el-main {
  color: #333;
  text-align: center;
  line-height: 160px;
}
</style>
